import Vue from 'vue'
import { ColorPicker } from '../node_modules/element-ui'
Vue.directive('drag', //自定义指令                                      JS
  {
    inserted: function (el, binding) {
      const h= el.offsetHeight
      const w=el.offsetWidth
      el.addEventListener(ColorPicker,()=>{
        return true
      })
      let oDiv = el
      oDiv.onmousedown = function (e) {
        e.stopPropagation()
        e.preventDefault()
        let disX = e.clientX - oDiv.offsetLeft
        let disY = e.clientY - oDiv.offsetTop
        document.onmousemove = function (e) {
          let l = e.clientX - disX
          let t = e.clientY - disY
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
          // binding.value({
          //   x: e.pageX,
          //   y: e.pageY
          // })
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
            console.log(el.offsetHeight/2)
            let t = (el.offsetHeight/2)
            let l = (el.offsetWidth/2)
            if(el.offsetTop>=t+h||el.offsetTop<=(-t)||el.offsetLeft>=l+w||el.offsetLeft<=(-l)){
            el.style.top='50%'
            el.style.left='50%'
            el.style.width = w+'px'
            el.style.height = h+'px'
          }
          return false
        }
      }
    }
  }
)
Vue.directive('mouseScroll', {
  inserted: function (el, binding, vnode) {
    el.addEventListener("mousewheel", MouseWheelHandler, false)
    el.addEventListener("DOMMouseScroll", MouseWheelHandler, false)
    let w = el.width
    let h = el.height
    function MouseWheelHandler(e) {
      e.stopPropagation()
      e.preventDefault()
       if (e.wheelDelta > 0) { //大于0,向前滚，放大
        el.style.width = (el.width +30) +'px'
        el.style.height = (el.height +20) + 'px'
      } else { //否则是缩小
        if(el.width>w){
        el.style.width = (el.width -30) + 'px'
        el.style.height = (el.height -20) + 'px'
        }else{
          el.style.top='50%'
          el.style.left='50%'
        }
      }
    }
  },

})
Vue.directive('no-data', //自定义指令   
  {
    inserted: function (el, binding, vnode) {
      el.classList.add('loading_parent_node')
      let odiv = document.createElement('div')
      odiv.className = 'loading_children_node'
      // odiv.innerHTML = '<div class="roataqx-loader"><div class="one"></div><div class="two"></div><div class="three"></div></div>'
      // odiv.innerHTML = "<img src='http://localhost:8080/static/img/loding.b6c70f8.gif'/>"
      odiv.innerHTML = "<div class='img'></div>"
      // odiv.innerHTML = "<div class='loading'><div><span></span></div><div><span></span></div><div><span></span></div></div>"
      el.appendChild(odiv)
    },
    update: (el, binding, vnode) => {
      let children_node = el.getElementsByClassName('loading_children_node')[0]
      if (binding.value) {
        children_node.style.opacity = 1
        children_node.style.display = 'block'
      } else {
        children_node.style.opacity = 0
        // children_node.addEventListener('transitionend', () => {
          children_node.style.display = 'none'
        // })
      }
    }
  }
)